বুটস্ট্রাপে তিন ধরণের ফরম লে-আউট রয়েছেঃ
তিনটি ফরম লে-আউটের জন্যই স্ট্যান্ডার রুলস গুলো হলোঃ
< form role="form" >
ব্যবহার করুন। (স্ক্রিন রিডারদের জন্য সহায়ক)< div class="form-group" >
এর মধ্যে রাখুন (কাঙ্খিত ব্যবধানের জন্য প্রয়োজন)< input >
, < textarea >
এবং < select >
এ .form-control
ক্লাস যুক্ত করুন।নিচের উদাহরণে দুইটি ইনফুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটন সহ একট vertical ফরম তৈরি করা হলোঃ
kt_satt_skill_example_id=1004
ইনলাইন ফরমে, সকল এলিমেন্টই ইনলাইন এবং বামে এ্যালাইনযুক্ত হয়। এছাড়াও লেভেলগুলো একই সাথে থাকে।
নোটঃ এটি শুধুমাত্র সেখানের এমন দেখাবে যেখানে ভিউপোর্ট(ডিভাইসের স্ক্রিনের আকার) কমপক্ষে 768px প্রশস্ত!
ইনলাইন ফরম তৈরি করা জন্য < form >
এলিমেন্টের মধ্যে .form-inline
ক্লাস যুক্ত করতে হবে।
নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ একটি ইনলাইন ফরম দেখানো হলোঃ
kt_satt_skill_example_id=1006
টিপসঃ আপনি যদি আপনার ফরমের প্রতিটি ইনপুট ফিল্ডে লেভেল যুক্ত না করেন, তাহলে স্ক্রিন রিডারদের জন্য তা কষ্টদায়ক হবে। .sr-only
ক্লাস ব্যবহার করে চাইলে আপনি স্ক্রিন রিডার ব্যতীত অন্য যেকোন ডিভাইসের জন্য লেভেল হাইড করতে পারেনঃ
kt_satt_skill_example_id=1008
একটি Horizontal ফরম মার্কআপের সংখ্যা এবং উপস্থাপনার দিক থেকে অন্যান্য ফরমের চেয়ে আলাদা।
Horizontal ফরম তৈরি করার নিয়মঃ
< form >
এলিমেন্টে .form-horizontal
ক্লাস অন্তর্ভূক্ত করুন।< label >
এলিমেন্টে .control-label
ক্লাস যুক্ত করুন।টিপসঃ একটি Horizontal ফরম লে-আউটে লেভেল এবং ফরম কন্ট্রোল গ্রুপকে বিন্যাস(align) করার জন্য বুটস্ট্রাপের পূর্বনির্ধারিত গ্রীড ক্লাস ব্যবহার করুন।
নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ Horizontal ফরম তৈরি করা হলোঃ
kt_satt_skill_example_id=1011
আরও দেখুন...